<template>
    <div id="apply">
        <div class="navbar">
            <div class="icon" @click="goBack">
                <i class="iconfont">&#xe72d;</i>
            </div>
            <div class="title" v-text="title"></div>
        </div>
        <div class="form">
            <div class="list">
                <label>游戏名称：</label>
                <span>{{gamename}}</span>
            </div>
            <div class="list">
                <label>申请账号：</label>
                <span>{{account}}</span>
            </div>
            <div class="list">
                <label>充值金额：</label>
                <span class="money">{{money}}元</span>
            </div>
            <div class="list">
                <label>充值日期：</label>
                <span>{{date | filtertimestamp}}</span>
            </div>
            <div class="list">
                <label>游戏区服：</label>
                <span>{{server}}</span>
            </div>
            <div class="list role_list">
                <label>角色名称：</label>
                <div class="change_wrapper" v-if="role">
                    <span>{{rolename}}</span>
                    <span class="change_role" @click="change_role">
                        <i></i>
                        修改
                    </span>
                </div>
                <div class="change_input" v-else>
                    <input type="text" v-model="changeRoleName" placeholder="请输入正确的角色名" ref="input">
                    <span class="btn ok" @click="change_ok">确定</span>
                    <span class="btn cancle" @click="change_role">取消</span>
                </div>
            </div>
            <div class="textarea">
                <span>对客服说：</span>
                <textarea placeholder="想对客服说的话" v-model="remarks"></textarea>
            </div>
            <div class="btns">
                <button class="submit" @click="submit">提交申请</button>
                <router-link to="/userGirl" tag="button" class="contact">如有疑问请联系客服</router-link>
            </div>
        </div>
    </div>
</template>

<script>
    import {formatDate} from 'js/date'
    import {submitApply} from 'api/game_box'
    import { Toast } from 'vant';
    import {mapState,mapMutations} from 'vuex' 
    export default {
        data(){
            return{
                title:"申请详情",
                gameid:'',
                roleid:'',
                rolename:'',
                server:'',
                serverid:'',
                gamename:'',
                account:'',
                money:'',
                date:'',
                remarks:'',
                changeRoleName:'',
                role:true,
                id:''
            }
        },
        created(){
            this.gameid=this.$route.query.gameid;
            this.roleid=this.$route.query.roleid;
            this.rolename=this.$route.query.rolename;
            this.server=this.$route.query.server;
            this.serverid=this.$route.query.serverid;
            this.gamename=this.$route.query.gamename;
            this.account=this.$route.query.account;
            this.money=this.$route.query.money;
            this.date=this.$route.query.date;
        },
         filters:{
             filtertimestamp(time){
                let date = new Date(time*1000);
                return formatDate(date, 'yyyy-MM-dd');
            }
        },
        methods:{
            goBack(){
                this.$router.back();
            },
            change_role(){
                this.role=!this.role;
                if(this.role==false){
                    setTimeout(()=>{
                        this.$refs.input.focus();
                    },300)
                }
            },
            change_ok(){
                if(this.changeRoleName.length!==0){
                    this.role=!this.role;
                    this.rolename=this.changeRoleName;
                }
            },
            submit(){
                submitApply(this.id,this.gameid,this.roleid,this.rolename,this.server,this.serverid,this.remarks).then(res=>{
                   if (res.data.error == 0) {
                       Toast("申请返利成功");
                       this.SET_RELOAD(true);
                       setTimeout(()=>{
                           this.$router.push({
                            path: '/rebate',
                        });
                       },1000)
                   }
                })
            },
             ...mapMutations(['SET_RELOAD'])
        },
        components:{
           
        },
        mounted(){
            document.getElementsByClassName("container")[0].style="height:0;overflow:hidden;";
        },
        beforeDestroy: function() {
            try{
                document.getElementsByClassName("container")[0].style="height:auto;overflow:auto;";
            }catch(err){

            }
        },
        destroyed() {
            Toast.clear();
        }
    }
</script>

<style scoped lang="scss">
@import "~styles/variable.scss";
@import "~styles/mixins.scss";
.navbar{
    position: relative;
    z-index:99;
    width: 7.5rem;
    margin:0 auto;
    display:flex;
    height:0.8rem;
    line-height:0.8rem;
    background:$color-block;
    color:#fff;
    .icon{
        position:absolute;
        top:0;
        left:0.2rem;
        .iconfont{
            padding:0 0.1rem;
            font-size:0.4rem;
        }
    }
    .title{
        flex:1;
        text-align:center;
        font-size:$font-size-l;
    }
}
#apply{
    width:7.5rem;
    position:fixed;
    top:0;
    left:50%;
    right:0;
    bottom:0;
    background:#fff;
    z-index:9999;
    transform: translateX(-50%);
    overflow: scroll;
    .list{
        padding:0 0.3rem;
        height:0.8rem;
        line-height:0.8rem;
        border-bottom:1px solid #f2f2f2;
        font-size:$font-size-m;
        span{
            color:#b0b0b0;
            &.money{
                color:#ff5e49;
            }
        }
        &.role_list{
            display:flex;
            position: relative;
            .change_input{
                display:flex;
                margin-top:.03rem;
                padding:0 .2rem;
                input{
                    width:3rem;
                    margin-right:.2rem;
                    vertical-align: top;
                    border:none;
                    outline:none;
                    height:.66rem;
                    line-height:.66rem;
                    background:transparent;
                    padding:0 .1rem;
                }
                .btn{
                    margin-top:.08rem;
                    display: inline-block;
                    width:1.02rem;
                    height:.52rem;
                    line-height:.5rem;
                    text-align: center;
                    border-radius:.25rem;
                    &.ok{
                        border:1px solid $color-focus;
                        background:#fff;
                        color:$color-focus;
                    }
                    &.cancle{
                        margin-left:.2rem;
                        background:$color-focus;
                        color:#fff;
                    }
                }
            }
        }
        .change_wrapper,.change_input{
            display:inline-block;
        }
        .change_input{
            width:5.46rem;
            height:.66rem;
            background:#f0efef;
            border-radius:5px;
        }
        .change_role{
            position:absolute;
            top:.12rem;
            right:.4rem;
            color:$color-focus;
            i{
                display:inline-block;
                width:.48rem;
                height:.48rem;
                @include bg-image('../../assets/image/icon_xiugaimz');
                background-size:100% 100%;
            }
        }
    }
    .textarea{
        margin-top:0.5rem;
        padding:0 0.3rem;
        font-size:$font-size-m;
        textarea{
            padding:0.12rem;
            margin:0.1rem auto 0 auto;
            width:100%;
            height:1.64rem;
            border:1px solid #cbcbcb;
            border-radius:5px;
            font-size:$font-size-s;
            resize: none;
        }
        span{
            display:block;

        }
    }
    .btns{
        margin-top:0.9rem;
        padding-bottom:0.4rem;
        text-align: center;
        button{
            margin-bottom:0.36rem;
            width:6.6rem;
            height:0.9rem;
            line-height:0.9rem;
            font-size:$font-size-m;
            border:none;
            outline: none;
            border-radius:0.45rem;
            &.submit{
                background:$color-focus;
                color:#fff;
            }
            &.contact{
                background:#fff;
                border:1px solid $color-focus;
                color:$color-focus;
            }
        }
    }
}
</style>